<template>
  <div>
    <div style="float: left; color: #42b983; font-size: 16px; font-weight: 500">
      事件渲染
    </div>
    <div>
      <p>click事件</p>
      <div>
        <a-button type="primary" @click="count++">Add 1</a-button>
        <p>Count is: {{ count }}</p>
        <!-- `greet` 是上面定义过的方法名 -->
        <a-button type="primary" @click="greet">Greet</a-button>
        <a-button type="primary" @click="say('hello')">Say hello</a-button>
        <a-button type="primary" @click="say('bye')">Say bye</a-button>
      </div>
    </div>
    <div>
      <p>$event 使用</p>
      <!-- 使用特殊的 $event 变量 -->
      <a-button
        type="primary"
        @click="warn('Form cannot be submitted yet.', $event)"
      >
        Submit
      </a-button>

      <!-- 使用内联箭头函数 -->
      <a-button
        type="primary"
        @click="(event) => warn('Form cannot be submitted yet.', event)"
      >
        Submit
      </a-button>
    </div>
    <div>
      <p>点击事件的传递</p>
      <!-- 单击事件将停止传递 -->
      <a @click.stop="doThis"></a>

      <!-- 提交事件将不再重新加载页面 -->
      <form @submit.prevent="onSubmit"></form>

      <!-- 修饰语可以使用链式书写 -->
      <a @click.stop.prevent="doThat" href="https://bing.com">必应搜索</a>

      <!-- 也可以只有修饰符 -->
      <form @submit.prevent></form>

      <!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
      <!-- 例如：事件处理器不来自子元素 -->
      <div @click.self="parent">
        父元素
        <div @click="childen">子元素</div>
      </div>
    </div>
    <div>
      <p>监听点击事件</p>
      <!-- 添加事件监听器时，使用 `capture` 捕获模式 -->
      <!-- 例如：指向内部元素的事件，在被内部元素处理前，先被外部处理 -->
      <div @click.capture="doThis">...</div>

      <!-- 点击事件最多被触发一次 -->
      <a @click.once="doThis">doThis</a>

      <!-- 滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成 -->
      <!-- 以防其中包含 `event.preventDefault()` -->
      <div @scroll.passive="onScroll">...</div>
    </div>
    <div>
      <p>keyup</p>
      <!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
      <a-input @keyup.enter="submit" placeholder="  submit" />
      <a-input @keyup.page-down="onPageDown" placeholder="  onPageDown" />
      <!-- -------------------------------------------------------------------------
      Vue 为一些常用的按键提供了别名：
    .enter
    .tab
    .delete (捕获“Delete”和“Backspace”两个按键)
    .esc
    .space
    .up
    .down
    .left
    .right -->
      <!-- --------------------------------------------------------------------
      你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器，只有当按键被按下时才会触发。
    .ctrl
    .alt
    .shift
    .meta -->
      <!-- Alt + Enter -->
      <a-input @keyup.alt.enter="clear" placeholder="  alt.enter" />

      <!-- Ctrl + 点击 -->
      <div @click.ctrl="doSomething">click.ctrl</div>
    </div>
    <div>
      <!-- 当按下 Ctrl 时，即使同时按下 Alt 或 Shift 也会触发 -->
      <button @click.ctrl="doSomething">A</button>

      <!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
      <button @click.ctrl.exact="doSomething">A</button>

      <!-- 仅当没有按下任何系统按键时触发 -->
      <button @click.exact="doSomething">A</button>
    </div>
    <div>
      <p>鼠标修饰符</p>
      <!-- 鼠标按键修饰符#
.left
.right
.middle -->
      <div id="mouseEventDiv" @click.right="doSomething">右键触发</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      name: "Vue.js",
    };
  },
  methods: {
    doSomething() {
      alert("doSomething");
    },
    clear() {
      alert("clear");
    },
    onPageDown() {
      alert("onPageDown");
    },
    submit() {
      alert("submit");
    },
    onScroll() {
      alert("onScroll");
    },
    doThis() {
      alert("doThis");
    },
    parent() {
      alert("parent");
    },
    childen() {
      alert("childen");
    },
    /**
     * 方法事件处理器会自动接收原生 DOM 事件并触发执行。
     * 在上面的例子中，我们能够通过被触发事件的 event.target.tagName 访问到该 DOM 元素
     * @param {*} event
     */
    greet(event) {
      // 方法中的 `this` 指向当前活跃的组件实例
      alert(`Hello ${this.name}!`);
      console.log(event);
      // `event` 是 DOM 原生事件
      if (event) {
        alert(event.target.tagName);
      }
    },
    say(message) {
      alert(message);
    },
    warn(message, event) {
      // 这里可以访问 DOM 原生事件
      if (event) {
        event.preventDefault();
      }
      alert(message);
    },
  },
};
</script>

<style scoped>
#mouseEventDiv {
  height: 100px;
  width: 100px;
  border: 2px solid blue;
}
p {
  border-top: 1px solid red;
}
button {
  margin: 8px;
}
</style>
